<template>
  <div class="headLayout">
    <div class="left" v-if="!$isMobile()">
      <img class="logo" src="../../assets/logo.png" alt="图片无法显示">
      <transition name="fade">
        <span v-if="!isCollapseStore.isCollapse">blue-admin</span>
      </transition>
    </div>
    <div class="right">
      <div class="right-content">
        <div class="collapse" @click="isCollapseStore.collapseMenu">
          <el-icon :size="28" color="#fff" v-if="!isCollapseStore.isCollapse && !$isMobile()">
            <Fold />
          </el-icon>
          <el-icon :size="28" color="#fff" v-else>
            <Expand />
          </el-icon>
        </div>
        <searchBox v-if="!$isMobile()"></searchBox>
      </div>
      <div class="left-content">
        <div class="item">
          <msgIcon></msgIcon>
        </div>
        <div class="item">
          <el-tooltip content="AI助手" placement="bottom">
            <div class="aiBox">
              <span class="ai" @click="router.push('/ai')">AI</span>
            </div>
          </el-tooltip>
        </div>
        <div class="item" v-if="!$isMobile()">
          <el-tooltip content="swagger文档" placement="bottom">
            <a :href="swaggerUrl" target="_blank">
              <el-icon :size="28" color="#fff">
                <Connection />
              </el-icon>
            </a>
          </el-tooltip>
        </div>
        <div class="item" v-if="!$isMobile()">
          <fullscreenIcon></fullscreenIcon>
        </div>
        <div class="item" v-if="!$isMobile()">
          <themeIcon></themeIcon>
        </div>
        <el-dropdown>
          <div class="drop">
            <el-avatar :size="28" :src="headUrl" />
            <span>{{ userInfo.username }}</span>
            <el-icon corlor="#409EFC">
              <arrow-down />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item style="--el-dropdown-menuItem-hover-color:var(--theme-color)"
                @click="getUserInfo">个人信息</el-dropdown-item>
              <el-dropdown-item style="--el-dropdown-menuItem-hover-color:var(--theme-color)"
                @click="edit">修改密码</el-dropdown-item>
              <el-dropdown-item style="--el-dropdown-menuItem-hover-color:var(--theme-color)">
                <el-popconfirm title="请确认要执行退出登录操作?" @confirm="loginOut">
                  <template #reference>
                    退出登录
                  </template>
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <editPassword ref="password"></editPassword>
    <addOrEdit ref="userAddOrEdit"></addOrEdit>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Fold, Expand } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import searchBox from "../../components/search-box.vue";
import fullscreenIcon from "@/components/fullscreen-icon.vue";
import themeIcon from "@/components/theme-icon.vue";
import msgIcon from "@/components/msg-icon.vue";
import { useIsCollapseStore } from "@/store/isCollapseStore";
import { useTagStore } from "@/store/tagStore";
import editPassword from './editPassword.vue'
import addOrEdit from '../author/user/addOrEdit.vue'

const isCollapseStore = useIsCollapseStore()
const tagStore = useTagStore()
const router = useRouter()
const password = ref()
const userInfo = ref({})
const userAddOrEdit = ref()
const headUrl = ref('')
const swaggerUrl = ref(import.meta.env.VITE_BASE_URL + '/doc.html')

const edit = () => {
  password.value.init()
}
const getUserInfo = () => {
  userAddOrEdit.value.init(userInfo.value.userId)
}

const loginOut = () => {
  localStorage.removeItem("access-admin")
  tagStore.tags = []
  router.push("/login")
  ElMessage.success('退出登录成功!')
}

onMounted(() => {
  const str = window.localStorage.getItem("access-admin")
  userInfo.value = JSON.parse(str)
  headUrl.value = import.meta.env.VITE_BASE_URL + '/system/file/download/' + userInfo.value.headPic
})

</script>
<style scoped lang="less">
.headLayout {
  height: 50px;
  width: 100%;
  background: linear-gradient(200deg, var(--sub-theme-color), var(--theme-color));
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    .logo {
      height: 30px;
      width: 30px;
    }

    span {
      width: 170px;
      color: #fff;
      line-height: 48px;
      font-size: 18px;
      white-space: nowrap;
      font-weight: 700;
    }
  }

  .right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;

      .collapse {
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .left-content {
      margin-right: 30px;
      display: flex;
      align-items: center;
      justify-content: center;

      .item {
        margin-right: 15px;
        cursor: pointer;

        .aiBox {
          height: 28px;
          width: 28px;
          background-color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .ai {
            font-size: 20px;
            font-weight: 600;
            font-family: Georgia, "Times New Roman", Times, serif;
            background: linear-gradient(200deg, var(--sub-theme-color), var(--theme-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .drop {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}

/* 定义过渡动画样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active for <=2.1.8 */
  {
  opacity: 0;
}
</style>